<template>
	<view class="ui-container">
		<!--悬浮工具栏-->
		<view class="fixed-tools-view" :class="[isTools?'show':'',ui?ui:'']">
			<view class="icon-view show" @click="tapToolsHidden">
				<!-- <text :class="[isIcon.down]" v-if="!isSlotDown" /> -->
				<u-icon :name="isIcon.down" size="34" v-if="!isSlotTop"></u-icon>
				<slot name="iconDown" v-else />
			</view>
			<view v-if="!isslotcontent">
				<block v-for="(item,index) in data" :key="index" >
					<view class="icon-view show" :data-item="item" :data-index="index" @click="tapToolsBar">
						<!-- <text :class="[item.icon]" /> -->
						<u-icon :name="item.icon" size="34" ></u-icon>
						<text class="num" v-if="item.num > 1">{{item.num}}</text>
					</view>
				</block>
			</view>
			<slot name="content" v-else></slot>
			<view class="icon-view " :class="[scrollTop >= top?'show':'']" @click="tapScrollTop">
				<!-- <text class="icon-top " :class="[isIcon.top]" v-if="!isSlotTop" /> -->
				<u-icon :name="isIcon.top"size="34" v-if="!isSlotTop"></u-icon>
				<slot name="iconTop" v-else />
			</view>
		</view>
		<!--展开工具栏-->
		<view class="fixed-tools-view " :class="[isTools?'':'show']">
			<view class="icon-view show" @click="tapToolsShow">
				
				<!-- <text :class="[isIcon.top]" v-if="!isSlotTop" /> -->
				<u-icon :name="isIcon.top" size="34" v-if="!isSlotTop"></u-icon>
				<slot name="iconUp" v-else />
			</view>
		</view>
	</view>
</template>

<script>
	import uIcon from "@/uview-ui/components/u-icon/u-icon.vue"
	export default {
		name: "fixed-tools",
		components:{
			uIcon
		},
		props: {
			isslotcontent:{
				type: Boolean,
				default: false
			},
			ui: {
				type: String,
				default: ''
			},
			data: {
				type: Array,
				default: []
			},
			scrollTop: {
				type: Number,
				optionalTypes: String,
				default: 0
			},
			top: {
				type: Number,
				optionalTypes: String,
				default: 30
			},
			show: {
				type: Boolean,
				default: true
			},
			isIcon: {
				type: Object,
				default: {}
			},
			isSlotDown: {
				type: Boolean,
				default: false
			},
			isSlotTop: {
				type: Boolean,
				default: false
			},
			isSlotUp: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			show(val) {
				this.isTools = val
			}
		},
		mounted() {
			let val = this.data.show;
			this.isTools = val
		},
		data() {
			return {
				isTools: false,
				addGlobalClass: true,
				multipleSlots: true
			};
		},
		methods: {
			//显示工具栏
			tapToolsShow() {
				this.isTools= true;
				this.$emit("tapShow",true)
				// this.triggerEvent('tapShow', true);
			},
			//隐藏工具栏
			tapToolsHidden() {
				this.isTools= false
				this.$emit("tapShow",false)
				// this.triggerEvent('tapShow', false);
			},
			//工具栏被点击
			tapToolsBar(e) {
				let {
					item,
					index
				} = e.currentTarget.dataset;
				// this.triggerEvent('tapBar', {
				// 	item,
				// 	index
				// });
				this.$emit("tapBar", item,index)
			},
			//滚动到顶部
			tapScrollTop() {
				wx.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
				this.$emit("tapScrollTop")
				// this.triggerEvent('tapScrollTop');
			},

		}

	}
</script>

<style lang="scss">
	.fixed-tools-view {
		position: fixed;
		right: 50rpx;
		bottom: -340rpx;
		width: 60rpx;
		transition: all 0.4s ease-in-out 0s;
		z-index: 999;

		.icon-view {
			position: relative;
			background: #ffffff;
			border: 1rpx solid #e8e8e8;
			height: 0rpx;
			width: 0rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			color: #585858;
			border-radius: 1024rpx;
			visibility: hidden;
			transition: all 0.4s ease-in-out 0s;

			.icon-top {
				visibility: hidden;
				transition: all 0.1s ease-in-out 0s;
			}

			.num {
				position: absolute;
				background-color: var(--red);
				color: var(--white);
				font-size: 18rpx;
				border-radius: 1024rpx;
				width: 30rpx;
				height: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				right: -5rpx;
				top: -10rpx;
			}
		}

		.icon-view.show {
			height: 80rpx;
			width: 80rpx;
			visibility: visible;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, .5);
			.icon-top {
				visibility: visible;
				transition: all 0.6s ease-in-out 0s;
			}
		}

		.icon-view.show+.icon-view.show {
			margin-top: 24rpx;
		}
	}

	.fixed-tools-view.show {
		bottom: 80rpx;
	}
</style>
